iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

自動化 End-End 測試 Nightwatch.js系列 第 1

自動化 End-End 測試 Nightwatch.js 之踩雷筆記:前言

  • 分享至 

  • xImage
  •  


大家好,我是 Dennis,今年三月底變成了前端打工仔,公司的大大們為了讓我對專案的理解程度更高,於是有了 E2E 的任務。半年過去全站的覆蓋率已經超過 80% 了,也遇到了一些困難。因此希望這篇系列文可以給未來也想碰 E2E 並使用 Nightwatch.js 這個框架的人,減少在 github/Stack Overflow 爬文跟測試的時間 ;)

何謂測試?

測試無所不在,並且任何人都可能接觸過測試。
可能是人工手動的測試,也可能是針對單一元件的 unit test。或是,本系列的主題 E2E testing

Unit test

Unit test 著重在呼叫一個單一的工作單元,並驗證單一結果,可能小到一個方法,或大到一個類別
此外,unit test 必須具備

  • 容易自動化、執行
  • 不相依真實物件
  • 不是臨時性、結一致
  • 可完全掌握、可清楚知道原因

https://ithelp.ithome.com.tw/upload/images/20210916/20120250xHk6KjhkH1.png

例如:

  • Pure function (no side effect)
  • ui component
  • reducer

常見的工具們:

  • cli api
  • chrome dev tool
  • redux dev tool
  • console.log

關於更多有關 unit test 可以參考「單元測試的藝術」

E2E testing

E2E 或 End-End,與 unit test 不同的地方是,重點為達到「整合測試」
E2E 是一個速度不快、結果不穩定且測試東西過多,難以找出來源的測試
但因為具有

  • 一個/多個相依真實物件
  • 確認完整 scope 的特性
    因此也是產品開發中重要的一環,透過完整性的測試,建立反饋循環。

https://ithelp.ithome.com.tw/upload/images/20210916/20120250KsUFU6WEIS.png

E2E 的建立方法

假設我們今天要測試 Nightwatch 的 Develop guide 連結正不正確,我們會需要:

  1. 進入 https://nightwatchjs.org/
  2. 點擊選單按鈕
  3. 點擊 Develop guide
  4. 檢查網址正確性

確認流程之後就可以把上面的文字轉為程式碼:

https://ithelp.ithome.com.tw/upload/images/20210916/20120250mpg5dKfUS1.png

https://ithelp.ithome.com.tw/upload/images/20210916/20120250quuglI1pE4.jpg
https://ithelp.ithome.com.tw/upload/images/20210916/201202504zIXOiGPmT.jpg
https://ithelp.ithome.com.tw/upload/images/20210916/20120250cUKnYFMbP6.jpg

以上就是使用 Nigthwatch.js 執行後產生的截圖,並根據我們所寫的「動作」完成截圖,分別為「進入」、「點擊」、「點擊」。

關於本系列文

蠻幸運能到目前的地方實習,卻也是從 0 開始接觸 E2E 測試,很多東西隨著前端技術的演進、效能優化等,其實也會影響 E2E 的友善程度。這半年中遇到了很多很奇妙的問題,不論是跨瀏覽器的部分、前端框架或是一些不單純只是點來點去的操作。而這些奇妙的問題解法散落在各種地方,有的可用有的不行,因此也累積了一些心得,看看能不能寫完 30 天,把奇妙的問題研究一下,順便附上解決方法,讓未來的人比較好找XD

然而,這個系列文並不是著重在如何建立 E2E 環境,也不是手把手教學,對於如何建立的同學們可以參考 Nightwatch 官網。這裡的環境是用 Nightwatch 搭配 BrowserStack 完成的。


下一篇
自動化 End-End 測試 Nightwatch.js 之踩雷筆記:檢查顏色
系列文
自動化 End-End 測試 Nightwatch.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言